<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../../../static/css/index.css">
<title>Service de Laveries - INSA de Lyon</title>

<!-- Código en JavaScript -->

<script>
    
	var tabla; 
	var tbl; 
	var tblBody; 
	var row; 
	var cell; 
	
	var numCol; 
	var numRow;
	var controlTable;  
	var color; 
	
	var end = ":00"; 
	var cont; 
	var conl; 
	
	var heure;
	var heure1;  
	var machine; 
	

	function createTable() {
		
		// get the reference for the body
        tabla = document.getElementById("tabla");
		
		// creates a <table> element and a <tbody> element
        tbl     = document.createElement("table");
        tblBody = document.createElement("tbody");
        
        // creating all cells
        for (var j = 0; j < numRow; j++) {
            // creates a table row
            row = document.createElement("tr");

            for (var i = 0; i < numCol; i++) {
				
				color = controlTable[j][i]; 
				cell = document.createElement("td");
				
				if(j==0 &&i>0){
					var cellText = document.createTextNode("Machine: " + conl);
					conl++;				
				}
				else if(i==0 && j>0){
					var cellText = document.createTextNode(cont+ ":00 - " + (cont+1)+ ":00");
					cont++; 
				}
				else{
                	var cellText = document.createTextNode("");
				}
				
				cell.appendChild(cellText);
				
				// Background Colors
				
				switch (color){
					
					case 0: 
						cell.bgColor = "white";
					break; 
					case 1:
					 	cell.bgColor = "red";
					break; 
					case 2:
					 	cell.bgColor = "gray";
					break; 
					case 3:
					 	cell.bgColor = "66CCFF";
					break; 
					case 4:
					 	cell.bgColor = "66CCFF";
					break; 
				}
				
                row.appendChild(cell);
            }

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        tabla.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");  
		
    }
	
	function erase(){
		
		tabla.removeChild(tbl) 
		tbl = null; 
		return false; 
	}
	
	function setUp(){
			
		var i; 
		var j; 
		
		numCol = prompt("Nombre de machines à laver:"); 
		numCol++; 
		numRow = 18; 
		cont = 7;  
		conl = 1; 
		
		// Inicialización de estados // 
		
		controlTable = new Array(); 
			for(i=0; i<numRow; i++)
   			controlTable[i] = new Array();
			
		//  Background for machines
			
			for(j=0; j<numCol; j++)
      		controlTable[0][j] = 3;
			
		// Background for time
			
			for(j=1; j<numRow; j++)
      		controlTable[j][0] = 4;
			
			
		// Initialisation of machine states
			
			for(i=1; i<numRow; i++)
   				for(j=1; j<numCol; j++)
      				controlTable[i][j] = 0;
			
		createTable(); 
	}
	
	function elemento(){
		var rowMod = prompt("Créneau:"); 
		var colMod = prompt("Machine:");
		
		heure = parseInt(rowMod); 
		heure1 = heure+1; 
		
		machine = parseInt(colMod); 
		rowMod -= 7; 
		
		alert("A résérver: Machine " + colMod + " de " + heure +":00 - " + heure1 + ":00"); 
		
		cont = 8;  
		conl = 1; 
		
		controlTable[rowMod][colMod] = 1;
		erase(); 
		createTable(); 
	}
	
	function post(doc,heure,machine) {
  		
		var myForm = document.createElement("form");
  		myForm.method="post" ;
  		myForm.action = doc;
  		
   		var myInput
		var myInput2
		
		myInput = document.createElement("input") ;
    	myInput.setAttribute("name","date");
    	myInput.setAttribute("value",heure);
    	myForm.appendChild(myInput) ;
		
		myInput2 = document.createElement("input") ;
    	myInput2.setAttribute("name","machine");
    	myInput2.setAttribute("value",machine);
    	myForm.appendChild(myInput2) ;
  		
  		document.body.appendChild(myForm) ;
  		myForm.submit() ;
  		document.body.removeChild(myForm) ;
	}
	
	function accept(){
		alert("Reservation: " + machine + " de " + heure +":00 - " + heure1 +":00");
		post(user.php,heure,machine); 
	}
	
</script>



<!-- Fin de código en JavaScript -->

</head>

<body>
</body>

<div id="header">

<!-- Segunda posible implementación -->

<div id="selectBox">
<select name="#">
<option value="">Residence</option>
<option value="">Residence A</option>
<option value="">Residence B</option>
<option value="">Residence C</option>
<option value="">Residence D</option>
<option value="">Residence E</option>
<option value="">Residence F</option>
<option value="">Residence G</option>
<option value="">Residence H</option>
<option value="">Residence I</option>
<option value="">Residence J</option>
<option value="">Residence Magellan</option>
</select>
</div>

<div id="selectBox2">
<select name="#">
<option value="#">1</option>
<option value="#">2</option>
<option value="#">3</option>
<option value="#">4</option>
<option value="#">5</option>
<option value="#">6</option>
<option value="#">7</option>
<option value="#">8</option>
<option value="#">9</option>
<option value="#">10</option>
<option value="#">11</option>
<option value="#">12</option>
<option value="#">13</option>
<option value="#">14</option>
<option value="#">15</option>
<option value="#">16</option>
<option value="#">17</option>
<option value="#">18</option>
<option value="#">19</option>
<option value="#">20</option>
<option value="#">21</option>
<option value="#">22</option>
<option value="#">23</option>
<option value="#">24</option>
<option value="#">25</option>
<option value="#">26</option>
<option value="#">27</option>
<option value="#">28</option>
<option value="#">29</option>
<option value="#">30</option>
<option value="#">31</option>
</select>
</div>
<div id="selectBox3" ice:editable="*">
  <div align="center">
    <select name="#2">
      <option value="#">Janvier</option>
      <option value="#">Fevrier</option>
      <option value="#">Mars</option>
      <option value="#">Avril</option>
      <option value="#">Mai</option>
      <option value="#">Juin</option>
      <option value="#">Juillet</option>
      <option value="#">Septembre</option>
      <option value="#">Octobre</option>
      <option value="#">Novembre</option>
      <option value="#">Decembre</option>
    </select>
  </div>
</div>
<div id="selectBox4">
  <select name="#3">
    <option value="#">2012</option>
  </select>
</div>
</div>


<form id="Formulaire" method="post" action="#">
   <p>
     <label for="pseudo">Utilisateur :</label></p>
   <p>
     <input name="pseudo" type="text" id="pseudo"/></p>
   <p>
     <label for="motdepasse">Mot de passe :</label></p>
   <p>
     <input id="motdepasse" name="motdepasse" type="password"/></p>
   <p>
     <input type="submit" value="Connexion" />
   </p>
 </form>


<div id="tabla"></div>
<p></p>

<div id="links">
<p><a href="#" onclick="erase();">Erase</a></p>
<p><a href="#" onclick="setUp();">Set Up</a></p>
<p><a href="#" onclick="elemento();">Reserve</a></p>
<p><a href="#" onclick="elemento();">Accept</a></p>

</div>




</html>
